<!DOCTYPE html>
<html>
	<head>
		<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
		<META HTTP-EQUIV="expires" CONTENT="0">
		<meta charset="utf-8">
    	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    	<title>线路地图</title>
    	<style>
    		*{margin:0;padding:0;border:0;}
    		div{width:100%}
    		li{list-style-type:none;}
    		img{display:block;width:100%;}
    		#line_way{position:relative;}
    		#line_way ul{width:100%;height:100%;}
    		#line_way ul li{position:absolute;border:1px solid red;z-index: 100;opacity:0}
    		#floDiv{position:fixed;display:none;z-index: 200;box-shadow:4px 4px 4px #999;background-color:#fff}
    	
    		.rotate{animation:rot 2s linear infinite;-webkit-animation:rot 2s linear infinite;}
		@keyframes rot{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(180deg);}
			100%{transform:rotate(360deg);}
		}
		@-webkit-keyframes rot{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(180deg);}
			100%{transform:rotate(360deg);}
		}
    	</style>
    	
	</head>
	<body>
		<audio id="audio" src="./music/Multex.mp3" autoplay preload></audio>
		<img class="rotate" src="./img/button.png" id="cls" style="display:block;width:10%;position:absolute;z-index: 60;font-weight:700;right:10px;top:10px"/>
		<img id="floDiv">
		<div><img src="./img/page01/page_01.jpg" alt="线路地图" /></div>
		<div id="line_way"><img src="./img/page01/page_02.jpg" alt="线路地图" />
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div><img src="./img/page01/page_03.jpg?index=21" alt="线路地图" /></div>
		<div><img src="./img/page01/page_04.jpg?index=21" alt="线路地图" /></div>
		<script>
			var wid = window.innerWidth;
			var floDiv = document.getElementById('floDiv');
			floDiv.style.width = wid/720*590+'px';
			floDiv.style.height = wid/720*680+'px';
			floDiv.style.top = wid/720*150+'px';
			floDiv.style.left = wid/720*65+'px';
			floDiv.onclick = function(){this.style.display = 'none'};
		
			var posArr = [
				pos(185,125),
				pos(310,10),
				pos(470,10),
				pos(600,140),
				pos(600,260),
				pos(600,375),
				pos(600,495),
				pos(600,610),
				pos(600,725),
				pos(600,840)
			];
			var lists = document.getElementById('line_way').getElementsByTagName('li');
			for(var i=0;i<posArr.length;i++){
				lists[i].style.width = posArr[i].w+'px';
				lists[i].style.height = posArr[i].w+'px';
				lists[i].style.left = posArr[i].x+'px';
				lists[i].style.top = posArr[i].y+'px';
				lists[i].index = i;
				lists[i].onclick = function(){
					floDiv.style.display = 'block';
					floDiv.src = './img/page01/info'+(this.index+1)+'.jpg?index=1'
				};
			}
			function pos(rx,ry){
				var wid = window.innerWidth;
				return {
					x : wid/720*rx,
					y : wid/720*ry,
					w : wid/720*60
				}
			}
			
			var audio = document.getElementById('audio');
			audio.canplay = function(){audioAutoPlay('audio');};
			audioAutoPlay('audio');
			
			function audioAutoPlay(id){
			    var audio = document.getElementById(id);
			    audio.play();
			    document.addEventListener("WeixinJSBridgeReady", function () {
			            audio.play();
			    }, false);
			}
			
		</script>
		<script>
		;(function(){
			var au = document.getElementById('audio');
			var cls = document.getElementById('cls');
			var flg = true;
			cls.onclick = function(){
				if(flg){
					au.pause();
					cls.className = "";
					flg = false;
				}else{
					au.play();
					cls.className = "rotate";
					flg=true;
				}

			};
		})();
	</script>
	</body>
</html>

